import { Icon } from "../../components";
import { BrowserRouter as Router,Route,Link, Switch } from 'react-router-dom'
import routers from '../router/router';

import { Provider } from 'react-redux'
import store from '../redux/redux'


export default function Home(props) {

    const div1 = {
        float:"left",
        color:"#FFF",
        fontSize:"25px",
        height:"58px",
        width:"120px",
        lineHeight: "50px",
        border:"1px solid red",
        backgroundColor:"#624B62",
        marginLeft:"10px",
        textAlign:"center",
        cursor: "pointer"
      };

    return (
        <Router>
            <Provider store={store}>
                <div>
                    <div style={{height:"60px",backgroundColor:"#000",width:"100%",float:"left"}}>
                        <div style={{float:"left",color:"#FFF"}}><Icon type="icon-xue" style={{fontSize: "60px"}}/></div>
                        <div style={div1}><Link to="/">index</Link></div>
                        <div style={div1}><Link to="/userList">list</Link></div>
                        <div style={div1}><Link to="/userInfo">employee</Link></div>
                    </div>
                    {/* 路由配置 */}
                    <Switch>
                        {
                            routers.map((item,idx)=>{
                                if(item.exact){
                                    return <Route key={idx} exact path={item.path} component={item.component}></Route>
                                }else{ 
                                    return <Route key={idx} path={item.path} component={item.component}></Route>
                                }
                            })
                        }
                    </Switch>
                </div>
            </Provider>
        </Router>
    )
}